<template>
    <view class="login-wrap" :data-theme="globPrimary">
        <u-navbar title="找回密码"></u-navbar>
        <!-- 验证码登录 -->
        <view v-show="current">
            <u-form
                :model="verify"
                ref="verifyForm"
                :error-type="errorType"
                label-width="120rpx"
            >
                <u-form-item label="+86" left-icon="arrow-down" prop="phone"
                    ><u-input
                        v-model="verify.phone"
                        placeholder="请输入手机号"
                        type="number"
                /></u-form-item>
                <u-form-item label="验证码" prop="verify">
                    <u-input
                        placeholder="请输入验证码"
                        v-model="verify.verify"
                        type="text"
                    ></u-input>
                    <edu-button
                        slot="right"
                        type="text"
                        :disabled="verifyDisabled || codeType"
                        @click="handleGetCode"
                        class="code-btn"
                        >{{ codeTips }}</edu-button
                    >
                </u-form-item>
            </u-form>
            <view class="verify-btn">
                <edu-button
                    type="primary"
                    @click="$u.debounce(handleVerifySubmit, 1000)"
                    >下一步</edu-button
                >
            </view>
        </view>
        <!-- 账号登录 -->
        <view v-show="!current">
            <u-form
                :model="reset"
                ref="resetForm"
                :error-type="errorType"
                label-width="160rpx"
            >
                <u-form-item label="设置新密码" prop="password"
                    ><u-input
                        :password-icon="true"
                        type="password"
                        v-model="reset.password"
                        placeholder="请输入密码"
                    ></u-input
                ></u-form-item>
                <u-form-item label="确认密码" prop="rePassword">
                    <u-input
                        :password-icon="true"
                        type="password"
                        v-model="reset.rePassword"
                        placeholder="请再次输入密码"
                    ></u-input>
                </u-form-item>
            </u-form>
            <u-alert-tips
                :show-icon="true"
                description="密码长度为6~20个字符，区分大小写"
                icon="error-circle-fill"
                :desc-style="{
                    color: '#909399',
                }"
                :icon-style="{
                    color: '#B7BAC1',
                }"
            ></u-alert-tips>
            <view class="reset-btn">
                <edu-button
                    type="primary"
                    @click="$u.debounce(handleResetSubmit, 1000)"
                    >确定</edu-button
                >
            </view>
        </view>
        <u-verification-code
            seconds="60"
            ref="uCode"
            @change="codeChange"
            @end="codeEnd"
            @start="codeStart"
        ></u-verification-code>
        <u-toast ref="uToast" />
    </view>
</template>

<script>
import md5Libs from "@/uview-ui/libs/function/md5";
import { mapGetters } from "vuex";
export default {
    data() {
        return {
            current: true,
            verify: {
                phone: "",
                verify: "",
            },
            reset: {
                phone: "",
                pk: "",
                password: "",
                rePassword: "",
            },
            rulesVerify: {
                phone: [
                    {
                        required: true,
                        message: "请输入手机号",
                        trigger: ["change", "blur"],
                    },
                    {
                        validator: (rule, value, callback) => {
                            return this.$u.test.mobile(value);
                        },
                        message: "手机号码不正确",
                        trigger: ["change", "blur"],
                    },
                ],
                verify: [
                    {
                        required: true,
                        message: "请输入验证码",
                        trigger: ["change", "blur"],
                    },
                ],
            },
            rulesReset: {
                password: [
                    {
                        required: true,
                        message: "请输入密码",
                        trigger: ["change", "blur"],
                    },
                    {
                        validator: (rule, value, callback) => {
                            return this.$edu.test.password(value);
                        },
                        message: "长度在6-20之间",
                        trigger: ["change", "blur"],
                    },
                ],
                rePassword: [
                    {
                        required: true,
                        message: "请重新输入密码",
                        trigger: ["change", "blur"],
                    },
                    {
                        validator: (rule, value, callback) => {
                            return value === this.reset.password;
                        },
                        message: "两次输入的密码不相等",
                        trigger: ["change", "blur"],
                    },
                ],
            },
            codeTips: "",
            codeType: true,
            errorType: ["message"],
        };
    },
    computed: {
        ...mapGetters({
            globPrimary: "designSetting/getGlobTheme",
            globPrimaryColor: "designSetting/getGlobThemeColor",
        }),
        verifyDisabled() {
            let disabled = true;
            if (this.$u.test.mobile(this.verify.phone)) {
                this.codeType = false;
                disabled = false;
            } else {
                this.codeType = true;
            }
            return disabled;
        },
    },
    options: { styleIsolation: "shared" },
    methods: {
        // 找回密码-短信验证
        handleVerifySubmit() {
            this.$refs.verifyForm.validate((valid) => {
                if (valid) {
                    this.$edu.api
                        .createUserAccountVerify({
                            ...this.verify,
                        })
                        .then((res) => {
                            this.current = false;
                            this.reset.phone = this.verify.phone;
                            this.reset.pk = res.data.pk;
                        })
                        .catch((err) => {
                            this.$u.toast(err.msg);
                        });
                }
            });
        },
        // 找回密码-重置密码
        handleResetSubmit() {
            this.$refs.resetForm.validate((valid) => {
                if (valid) {
                    this.$edu.api
                        .createUserAccountReset({
                            phone: this.reset.phone,
                            password: md5Libs.md5(this.reset.password),
                            pk: this.reset.pk,
                        })
                        .then((res) => {
                            this.$refs.uToast.show({
                                title: res.msg,
                                url: "/pageUser/login/index",
                            });
                        })
                        .catch((err) => {
                            this.$u.toast(err.msg);
                        });
                }
            });
        },
        // 获取验证码
        handleGetCode() {
            if (this.$refs.uCode.canGetCode) {
                this.$edu.api
                    .createVerify({
                        phone: this.verify.phone,
                        type: "retrieve",
                    })
                    .then((res) => {
                        this.$refs.uCode.start();
                    });
            }
        },
        // 倒计时
        codeChange(text) {
            this.codeTips = text;
        },
        // 倒计时开始
        codeStart() {
            this.codeType = true;
        },
        // 倒计时结束
        codeEnd() {
            this.codeType = false;
        },
    },
    // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
    onReady() {
        this.$refs.verifyForm.setRules(this.rulesVerify);
        this.$refs.resetForm.setRules(this.rulesReset);
    },
};
</script>

<style lang="scss" scoped>
.login-wrap {
    padding: 0 30rpx;
    height: calc(100vh);
    /* #ifdef H5 */
    height: calc(100vh - var(--window-top));
    /* #endif */
    background-color: #fff;
    /deep/.u-form-item {
        color: #606266;
        .u-form-item--left__content {
            flex-direction: row-reverse;
        }
    }
    .u-alert-tips {
        margin-top: 16rpx;
        border: none;
        padding-left: 0;
        padding-right: 0;
        background-color: #fff;
    }
    .verify-btn {
        margin-top: 170rpx;
    }
    .reset-btn {
        margin-top: 54rpx;
    }
    .code-btn {
        margin-left: auto;
    }
    .code-disabled {
        color: #b7bac1;
    }
}
</style>
